import dom, { ajax, domg } from "../init.js";
import { obj } from "../index.js";
import animate from "../../util/animate.js";
import { articlelimit } from "../../util/interface.js";
// import { toarticle } from "../navigation/eventhandle.js";
import { isarticle } from "../navigation/navigation.js";
import header from "../header/eventhandle.js";

//初始化获取热度排行榜
(async function () {
  ajax.get("/article/getTopHeat").then((data: any) => {
    updateTop(JSON.parse(data).data, "icon-redu");
  });
})();
//初始化获取全部标签
export async function initTop2() {
  const result = (await ajax.get("/article/getAlllabel")) as string;
  if (result.includes("Error")) return console.log("获取事变");
  const data = JSON.parse(result) as {
    msg: string;
    status: string;
    data: Array<string>;
  };
  data.data.forEach((item, index) => {
    domg(".Alllabel").insertAdjacentHTML("beforeend", Alllabet(item, index));
    domg(".Alllabel").children[
      domg(".Alllabel").children.length - 1
    ].addEventListener("click", clicklabel);
  });
}

export async function topover(e: Event) {
  const tagt = <HTMLInputElement>e.target;
  if (e.target === dom.top.gift) {
    animate(dom.top.position, tagt.offsetLeft);
  } else if (e.target === dom.top.heat) {
    animate(dom.top.position, tagt.offsetLeft);
  } else if (e.target === dom.top.time) {
    animate(dom.top.position, tagt.offsetLeft);
  }
}

export async function topout(e: Event) {
  animate(dom.top.position, obj.top);
}

export async function topclick(e: Event) {
  const tagt = <HTMLInputElement>e.target;
  let data = {};
  if (e.target === dom.top.gift) {
    obj.top = tagt.offsetLeft;
    ajax.get("/article/getTopGift").then((data: any) => {
      updateTop(JSON.parse(data).data, "icon-liwuhuodong");
    });
  } else if (e.target === dom.top.heat) {
    obj.top = tagt.offsetLeft;
    ajax.get("/article/getTopHeat").then((data: any) => {
      updateTop(JSON.parse(data).data, "icon-redu");
    });
  } else if (e.target === dom.top.time) {
    obj.top = tagt.offsetLeft;
    ajax.get("/article/getTopTime").then((data: any) => {
      updateTop(JSON.parse(data).data, "icon-shijian_o");
    });
  }
}
//渲染top
function updateTop(arr: Array<{ title: string; id: string }>, icon: string) {
  if (!dom.top.topes1) throw "dom.top.topes1不存在";
  dom.top.topes1.innerHTML = "";
  arr.forEach((item: { title: string; id: string }, index) => {
    let str = `        <div class="atk" data-index='${item.id}'>
    <span>${index + 1}.</span>
    <a href="JavaScript:;" class="aa${index}"> ${item.title}</a>
    <span class="iconfont ${icon} t${index + 1}"></span>
    </div>`;
    dom.top.topes1?.insertAdjacentHTML("beforeend", str);
    const a = document.querySelector(`.aa${index}`) as HTMLElement;
    a.onclick = async function (this: any) {
      const result = await ajax.get("/article/findpk", {
        id: (this as any).parentElement.getAttribute("data-index"),
      });
      if ((result as string).includes("Error")) return console.log("出错了");
      const res = JSON.parse(result as string);
      const data = res as articlelimit;
      if (data.msg !== "ok") return alert(data.msg);
      localStorage.setItem("article", JSON.stringify(data.data));
      location.hash = "/MyArticle" + item.id;
      isarticle();
    };
  });
}

function Alllabet(str: string, id: number) {
  if (!str) return "";
  if (str === "分享")
    return `<div class="listlabel" id=${id} style="background-color:#c27ce9">${str}</div>`;
  if (str === "日常")
    return `<div class="listlabel" id=${id} style="background-color:#d77959">${str}</div>`;
  if (str === "技术")
    return `<div class="listlabel" id=${id} style="background-color:#42c497">${str}</div>`;
  return `<div class="listlabel" id=${id} style>${str}</div>`;
}

function clicklabel(e: any) {
  const label = e.target.innerText;
  (dom.herder.findtitleipt as any).value = label;
  location.hash = "/find";
  header.findtitle();
}
